<template>
	<view>
		<!-- pages/user/order/index.wxml -->

		<!-- 头部 -->
		<navber id="head-navber" :navbarData="navbarData"></navber>
		<!-- 搜索 -->
		<view class="search">
			<view class="search-input">
				<view class="search-input-img">
					<image :src="imgUrl + '/imgs/search.png'"></image>
				</view>
				<view class="search-input-input">
					<input placeholder="请输入关键字" @input="inputKeyword" />
				</view>
			</view>
			<view class="search-btn" @tap="confirmKeyword">搜索</view>
		</view>
		<view class="service">
			<button class="no-button" open-type="contact">
				<view class="orderSubmit-item-img">
					<image :src="imgUrl + '/imgs/goods/serve.png'"></image>
				</view>
				<view class="text">客服</view>
			</button>
			<!-- <button open-type='contact'>
	</button> -->
		</view>
		<view class="but" :style="scrollHeight >= 60 ? 'position:sticky;top:' + stickyTop : 'position:relative'">
			<view class="but-item">
				<view class="but-item-text">
					<view :class="'but-item-text-text ' + (butCheck == 'dfk' ? 'but-item-action' : '')"
						@tap="selectLabel($event, { type: 'dfk' })" data-type="dfk">待付款</view>
					<view class="but-item-text-action" v-if="butCheck == 'dfk'"></view>
				</view>
			</view>

			<view class="but-item">
				<view class="but-item-text">
					<view :class="'but-item-text-text ' + (butCheck == 'dfh' ? 'but-item-action' : '')"
						@tap="selectLabel($event, { type: 'dfh' })" data-type="dfh">待发货</view>
					<view class="but-item-text-action" v-if="butCheck == 'dfh'"></view>
				</view>
			</view>
			<view class="but-item">
				<view class="but-item-text">
					<view :class="'but-item-text-text ' + (butCheck == 'yfh' ? 'but-item-action' : '')"
						@tap="selectLabel($event, { type: 'yfh' })" data-type="yfh">已发货</view>
					<view class="but-item-text-action" v-if="butCheck == 'yfh'"></view>
				</view>
			</view>
			<view class="but-item">
				<view class="but-item-text">
					<view :class="'but-item-text-text ' + (butCheck == 'ysh' ? 'but-item-action' : '')"
						@tap="selectLabel($event, { type: 'ysh' })" data-type="ysh">已收货</view>
					<view class="but-item-text-action" v-if="butCheck == 'ysh'"></view>
				</view>
			</view>
			<view class="but-item">
				<view class="but-item-text">
					<view :class="'but-item-text-text ' + (butCheck == 'all' ? 'but-item-action' : '')"
						@tap="selectLabel($event, { type: 'all' })" data-type="all">全部</view>
					<view class="but-item-text-action" v-if="butCheck == 'all'"></view>
				</view>
			</view>
		</view>

		<!-- 列表 -->
		<view class="order">
			<view class="order-item" v-if="dataList.length > 0" v-for="(item, index) in dataList" :key="index">
				<view class="order-item-head">
					<view class="order-item-time">
						<view class="store-img">
							<image :src="item.store['store_label']"></image>
						</view>
						<view class="store-name">{{ item.store['store_name'] }}</view>
					</view>
					<view class="order-item-status-div">
						<view :class="'order-item-status order-item-status-' + item.status_class">
							{{ item.order_status_name }}
						</view>
					</view>
				</view>

				<view class="order-item-layer" v-for="(itemx, index1) in item.items" :key="itemx.index1">
					<view class="order-item-img" @tap="goodsDetail($event, { goods_id: itemx.goods_id })"
						:data-goods_id="itemx.goods_id">
						<image mode="aspectFill" :src="itemx.goods_img"></image>
					</view>

					<view class="order-item-info">
						<view class="order-item-info-title" @tap="goodsDetail($event, { goods_id: itemx.goods_id })"
							:data-goods_id="itemx.goods_id">
							{{ itemx.goods_title }}
						</view>
						<view class="order-item-info-text-title-attr">
							{{ itemx.attribute_names }}
						</view>
						<view class="order-item-info-pn">
							<view class="order-item-info-pn-price">
								<span class="tip">¥</span>
								{{ itemx.goods_price }}
							</view>
							<view class="order-item-info-pn-number">
								<span class="tip">X</span>
								{{ itemx.goods_number }}
							</view>
						</view>
					</view>
				</view>

				<view class="order-info-div-price">
					<view class="order-item-return">
						<view>
							预估收益：
							<span>¥{{ item.return_money }}</span>
						</view>
					</view>
					<view class="order-item-total">
						<view>
							合计：
							<span>¥{{ item.order_total }}</span>
						</view>
					</view>
					<view class="order-item-goods">
						<view>
							共
							<span>{{ item.goods_number }}</span>
							件商品
						</view>
					</view>
				</view>

				<view class="order-item-but" v-if="item.order_status > 0">
					<view class="order-item-but-cancel" v-if="item.order_status >= 2"
						@tap="showOrder($event, { oid: item.id, status: item.order_status })" :data-oid="item.id"
						:data-status="item.order_status">
						查看订单
					</view>
					<view class="order-item-but-cancel" v-if="
                            (item.order_status > 2 && item.order_status < 4 && item.out_handle_status == 0 && item.goods_type == 0)
                        " @tap="outOrder($event, { oid: item.id })" :data-oid="item.id">
						申请退款
					</view>
					<view class="order-item-but-cancel"
						v-if="item.order_status >= 2 && item.out_handle_status > 0 && item.order_status < 4"
						@tap="outStatus($event, { oid: item.id })" :data-oid="item.id">
						退款进度
					</view>
					<view class="order-item-but-cancel" v-if="item.order_status < 2" @tap="cancelOrder($event, { oid: item.id })" :data-oid="item.id">取消订单</view>
					<view class="order-item-but-submit confirm-take" v-if="item.order_status == 1"
						@tap="payOrder($event, { oid: item.id })" :data-oid="item.id">去付款</view>
					<view class="order-item-but-submit confirm-take"
						v-if="(item.order_status == 2 || item.order_status == 3)"
						@tap="confirmTake($event, { oid: item.id })" :data-oid="item.id">
						确认收货
					</view>
				</view>
			</view>
			<view class="not-res" v-if="dataList.length == 0">
				<image :src="imgUrl + '/imgs/not_res_bg.png'" mode="widthFix"></image>
			</view>
		</view>
	</view>
</template>

<script>
	import navber from '@/components/navber/index';
	// pages/user/order/index.js
	const Config = require('../../../config/index.js');

	const Api = require('../../../api/index.js');

	const app = getApp();
	export default {
		components: {
			navber
		},
		data() {
			return {
				navbarData: {
					title: '订单' //顶部标题
				},
				//导航栏
				imgUrl: Config.imgUrl,
				//图片url
				butCheck: 'all',
				goodsType: 0, //0正常订单 1流量补贴商城
				pagenow: 1, //
				dataList: [],
				scrollHeight: 0,
				keyword: '',
				isRefund: true,
				stickyTop: app.globalData.stickyTop
			};
		},
		onReachBottom: function(e) {
			//滚动底部
			this.getData();
		},
		onPageScroll: function(h) {
			// 滚动距离
			this.setData({
				scrollHeight: h.scrollTop
			});
		},
		onLoad(e) {
			if (e.type) {
				e.type = e.type;
			} else {
				e.type = 'all';
			}
			this.setData({
				butCheck: e.type,
			});
			if (e.goods_type) {
				this.setData({
					goodsType: e.goods_type
				});
			}
		},
		onShow() {
			this.setData({
				dataList: [],
				pagenow: 1
			});
			this.getData();
		},
		onPullDownRefresh(e) {
			this.setData({
				dataList: [],
				pagenow: 1
			});
			this.getData();
			uni.stopPullDownRefresh();
		},
		methods: {
			onToCall(e, _dataset) {

				if (!e.currentTarget) {
					if (_dataSet.tagId) {
						e.currentTarget = {
							id: _dataSet.tagId
						};
					} else {
						e.currentTarget = {
							dataset: _dataSet
						};
					}
				}

				//拨打电话
				uni.makePhoneCall({
					phoneNumber: app.globalData.service,
					success: function() {
						console.log('成功拨打电话');
					}
				});
			},

			goodsDetail(e, _dataset) {

				if (!e.currentTarget) {
					if (_dataSet.tagId) {
						e.currentTarget = {
							id: _dataSet.tagId
						};
					} else {
						e.currentTarget = {
							dataset: _dataSet
						};
					}
				}

				// 商品详情
				uni.navigateTo({
					url: '/pages/goodsDetail/index?id=' + e.currentTarget.dataset.goods_id
				});
			},

			inputKeyword(e, _dataset) {

				if (!e.currentTarget) {
					if (_dataSet.tagId) {
						e.currentTarget = {
							id: _dataSet.tagId
						};
					} else {
						e.currentTarget = {
							dataset: _dataSet
						};
					}
				}

				// 关键字输入
				this.setData({
					keyword: e.detail.value
				});
			},

			confirmKeyword(e, _dataset) {

				if (!e.currentTarget) {
					if (_dataSet.tagId) {
						e.currentTarget = {
							id: _dataSet.tagId
						};
					} else {
						e.currentTarget = {
							dataset: _dataSet
						};
					}
				}

				//选择项
				this.setData({
					dataList: [],
					pagenow: 1
				});
				this.getData();
			},

			selectLabel(e, _dataset) {

				if (!e.currentTarget) {
					if (_dataSet.tagId) {
						e.currentTarget = {
							id: _dataSet.tagId
						};
					} else {
						e.currentTarget = {
							dataset: _dataSet
						};
					}
				}

				//选择项
				this.setData({
					butCheck: e.currentTarget.dataset.type,
					dataList: [],
					pagenow: 1
				});
				this.getData();
			},

			getData() {
				var json = {
					type: this.butCheck,
					goodsType: this.goodsType,
					pagenow: this.pagenow,
					keyword: this.keyword
				};
				Api.userOrderList(json).then((res) => {
					if (res.data.length > 0) {
						var data = this.dataList;
						data = data.concat(res.data);
						var page = this.pagenow + 1;
						this.setData({
							dataList: data,
							pagenow: page
						});
					} else {
						// wx.showToast({
						//   title: '暂无数据',
						//   icon: 'none',
						//   duration: 2000
						// })
					}
				});
			},

			payOrder(e, _dataset) {

				if (!e.currentTarget) {
					if (_dataSet.tagId) {
						e.currentTarget = {
							id: _dataSet.tagId
						};
					} else {
						e.currentTarget = {
							dataset: _dataSet
						};
					}
				}

				//提交订单
				uni.navigateTo({
					url: '/pages/pay/show/index?order_id=' + e.currentTarget.dataset.oid + '&pay_type=pay'
				});
			},

			cancelOrder(e, _dataset) {

				if (!e.currentTarget) {
					if (_dataSet.tagId) {
						e.currentTarget = {
							id: _dataSet.tagId
						};
					} else {
						e.currentTarget = {
							dataset: _dataSet
						};
					}
				}

				//取消订单
				var json = {
					order_id: e.currentTarget.dataset.oid
				};

				var _this = this;

				uni.showModal({
					title: '提示',
					content: '确认取消订单吗',

					success(res) {
						if (res.confirm) {
							Api.userCancelOrder(json).then((res) => {
								if (res.code == 1) {
									_this.setData({
										dataList: [],
										pagenow: 1
									});

									_this.getData();
								}
							});
						}
					}
				});
			},

			//订单详情
			showOrder(e, _dataset) {

				if (!e.currentTarget) {
					if (_dataSet.tagId) {
						e.currentTarget = {
							id: _dataSet.tagId
						};
					} else {
						e.currentTarget = {
							dataset: _dataSet
						};
					}
				}

				var status = e.currentTarget.dataset.status;
				var oid = e.currentTarget.dataset.oid;

				if (parseInt(status) >= 3) {
					uni.navigateTo({
						url: '/pages/user/order/logisticslist/index?id=' + oid
					});
				} else {
					uni.navigateTo({
						url: '/pages/user/order/details/index?id=' + oid
					});
				}
			},

			//申请退款
			outOrder(e, _dataset) {

				if (!e.currentTarget) {
					if (_dataSet.tagId) {
						e.currentTarget = {
							id: _dataSet.tagId
						};
					} else {
						e.currentTarget = {
							dataset: _dataSet
						};
					}
				}

				uni.navigateTo({
					url: '/pages/user/order/outorder/index?id=' + e.currentTarget.dataset.oid
				});
			},

			//退款进度
			outStatus(e, _dataset) {

				if (!e.currentTarget) {
					if (_dataSet.tagId) {
						e.currentTarget = {
							id: _dataSet.tagId
						};
					} else {
						e.currentTarget = {
							dataset: _dataSet
						};
					}
				}

				uni.navigateTo({
					url: '/pages/user/order/outstatus/index?id=' + e.currentTarget.dataset.oid
				});
			},

			confirmTake(e, _dataset) {

				if (!e.currentTarget) {
					if (_dataSet.tagId) {
						e.currentTarget = {
							id: _dataSet.tagId
						};
					} else {
						e.currentTarget = {
							dataset: _dataSet
						};
					}
				}

				//确认收货
				var json = {
					order_id: e.currentTarget.dataset.oid
				};

				var _this = this;

				uni.showModal({
					title: '确认收货提示',
					content: '请您确认货物全部收到，并且无损。确认后，交易金额会直接打给卖家，请仔细核对',

					success(res) {
						if (res.confirm) {
							Api.userConfirmTake(json).then((res) => {
								if (res.code == 1) {
									_this.setData({
										dataList: [],
										pagenow: 1
									});

									_this.getData();
								}
							});
						}
					}
				});
			},

			logisticsShow(e) {
				//查看物流
				uni.navigateTo({
					url: '/pages/user/order/logistics/index?id=' + e.currentTarget.dataset.oid
				});
			}
		}
	};
</script>
<style>
	@import './index.css';
</style>
